<template>
    <el-container class="body-height">
        <el-header class="home-header">
            <el-col :span="2" class="logo" :class="isCollapse?'logo-collapse-width':'logo-width'">
                {{isCollapse ? '' : sysName}}
            </el-col>
            <el-col :span="2">
                <div @click.prevent="collapse">
                    <i class="el-icon-menu"/>
                </div>
            </el-col>
            <el-col :span="4" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner">
                        <img src="https://h5.u51.com/99fenqi/image/distribution/cardLogo.jpg"/> {{sysUserName}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item @click.native="toinformation">个人中心</el-dropdown-item> -->
                        <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-header>
        <el-container>
            <el-aside class="container-aside" :width="isCollapse?'asideCollapseWidth':'asideWidth'" :class="isCollapse?'overflowInherit':'overflowAuto'">
                <el-menu class="container-menu" :default-active="$route.path" router unique-opened  background-color="#3F3F3F" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse">
                    <template v-for="(item,index) in routesleft" v-if="!item.hidden">
                        <!-- v-if="!ischildrenTrue(item)" -->
                        <el-submenu :index="index+''">
                            <template slot="title">
                                <i :class="item.iconCls"/>                        
                                <span slot="title">{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="child in item.children" v-if="!child.hidden" :key="child.path" :index="child.path">{{child.name}}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-aside>
            <el-main>
                <transition name="el-fade-in">
                    <router-view/>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getresourceList, gettitleList } from "../common/js/role";
import { loginOut } from "../api/api";

export default {
    data() {
        return {
            sysName: "管理后台",
            collapsed: false,
            sysUserName: "",
            routesleft: [], //权限路由数组
            resource: [],
            isCollapse: false,
            asideWidth: "190px",
            asideCollapseWidth: "60px"
        };
    },
    mounted() {
        var user = window.sessionStorage.getItem("userName");
        if (user) {
            const partten = /^1[3,5,8]\d{9}$/; // 手机号正则
            // 如果是登录名是手机号 脱敏
            if (partten.test(user)) {
                const userStr = user.substr(0, 3) + "****" + user.substr(7);
                this.sysUserName = userStr;
            } else {
                this.sysUserName = user;
            }
        }

        // router数组
        this.routesleft = this.$router.options.routes;
        // 一级导航栏数据
        const resource = getresourceList();
        // 二级导航栏数据
        const title = gettitleList();

        // 两次循环判断router数据与导航栏数据是否对应，如果对应将hidden置为false(左侧展示)
        for (var i = 0; i < this.routesleft.length; i++) {
            if (resource && resource.indexOf(this.routesleft[i].name) != -1) {
                this.routesleft[i].hidden = false;
                for (var j = 0; j < this.routesleft[i].children.length; j++) {
                    if (
                        title &&
                        title.indexOf(this.routesleft[i].children[j].name) != -1
                    ) {
                        this.routesleft[i].children[j].hidden = false;
                    }
                }
            }
        }
    },
    methods: {
        //退出登录
        logout() {
            this.$router.push("/login");
        },
        //折叠导航栏
        collapse() {
            this.isCollapse = !this.isCollapse;
        },
        toinformation() {
            this.$router.push({
                path: "/information"
            });
        },
        // 一级导航栏是否展示(当二级页面title返回时)
        ischildrenTrue(list) {
            const child = list.children;
            const hiddenArr = [];
            child.forEach(item => {
                hiddenArr.push(item.hidden);
            });
            if (
                hiddenArr.indexOf(false) !== -1 ||
                hiddenArr.indexOf(undefined) !== -1
            ) {
                return false;
            } else {
                return true;
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.body-height {
    height: 100%;
}

.home-header {
    background-color: #3b77b5;
    color: #fff;
    text-align: center;
    line-height: 60px;
    .logo {
        font-size: 16px;
    }
    .logo-width {
        width: 140px;
    }
    .logo-collapse-width {
        width: 60px;
    }
    .userinfo {
        float: right;
        .userinfo-inner {
            cursor: pointer;
            color: #fff;
            img {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                margin: 10px 0px 10px 10px;
                float: right;
            }
        }
    }
}

.container-aside {
    height: 100%;
    background-color: #3f3f3f;
}

.container-menu {
    border-right: none;
}

.container-menu:not(.el-menu--collapse) {
    width: 200px;
}

.overflowInherit {
    overflow: inherit !important;
}

.overflowAuto {
    overflow: auto;
}
</style>
